{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">用户数据</div>
                                    </div>
                                    <div class="head-dfix">
                                        <div class="d-left" style="padding-top: 16px">
                                            <canvas id="xuqiu" width="132" height="152"></canvas>
                                        </div>
                                        <div class="d-rigth">

                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai z"></text>
                                                    <text class="str">用户总数</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>

                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai b"></text>
                                                    <text class="str">本周新增</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>



                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai u"></text>
                                                    <text class="str">昨日新增</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>
                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai s"></text>
                                                    <text class="str">实时新增</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>




                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai h"></text>
                                                    <text class="str">活跃度</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>
                                            <div class="male">
                                                <div class="bg-txt ">
                                                    <text class="kuai r"></text>
                                                    <text class="str">日访问量</text>
                                                </div>
                                                <div class="d-add">998</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="u-name" style="padding-left: 20px">小程序用户数据</div>
                                        <div class="u-name" style="padding-right: 35px">H5用户数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="webapp" width="152" height="152"></canvas>
                                        <canvas id="webh5" width="152" height="152"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div style="padding-left: 10px">
                                            <text class="d-str">活跃度</text>
                                            <text class="d-add">65</text>
                                        </div>
                                        <div style="padding-right: 20px">
                                            <text class="d-str">活跃度</text>
                                            <text class="d-add">58</text>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">VIP数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">8.8月会员</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">600</text>
                                                    个
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">108月会员</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">66</text>
                                                    个
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
                                            <img src="__STATIC__/assets/media/image/hx.png">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">分享数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">总分享次数</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">600</text>
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">当日分享次数</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">66</text>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
                                            <canvas id="post"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>

                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>

<script>
    var chartDom = document.getElementById('xuqiu');
    var myChart = echarts.init(chartDom);
    var option = {
        title: '',
        tooltip : { //提示框组件
            trigger: 'item', //触发类型(饼状图片就是用这个)
            formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        color:['#5B78FF','#48cda6','#fd87fb','#8FDFFE','#E6A500','#FF6363'],  //手动设置每个图例的颜色
        series : [ //系列列表
            {
                name:'设备状态',  //系列名称
                type:'pie',   //类型 pie表示饼图
                center:['45%','41%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                radius : ['40%', '90%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                itemStyle : {  //图形样式
                    normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label : {  //饼图图形上的文本标签
                            show : false  //平常不显示
                        },
                        labelLine : {     //标签的视觉引导线样式
                            show : false  //平常不显示
                        }
                    },
                    emphasis : {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label : {  //饼图图形上的文本标签
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '10',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:80, name:'总数'},
                    {value:10, name:'本周'},
                    {value:30, name:'昨日'},
                    {value:20, name:'实时'},
                    {value:25, name:'日访问'},
                    {value:25, name:'活跃度'}
                ]
            }
        ]
    };
    myChart.setOption(option);

    var chartDom = document.getElementById('webapp');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: '565',
                    textAlign: 'center',
                    fill: '#FF4438',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '用户总数',
                    textAlign: 'center',
                    fill: '#E0E0E0',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: '#FF4438'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: 100 - 90,
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);

    var chartDom = document.getElementById('webh5');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: '565',
                    textAlign: 'center',
                    fill: '#3BE6FF',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '用户总数',
                    textAlign: 'center',
                    fill: '#3BE6FF',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果

            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: '#3BE6FF'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: 100 - 50,
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);

    var chartDom = document.getElementById('post');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        color: ['#F2FBFF'],
        title: '',
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: false
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                splitLine:{
                    show:false
                },
                show:false
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine:{
                    show:false
                },
                axisLine: {show:false,lineStyle:{color:"white"}}
            },

        ],
        axisTick:{show:false},
        axisLine:{show:false},
        series: [
            {
                name: 'Line 1',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(128, 255, 165)'
                    }, {
                        offset: 1,
                        color: 'rgba(1, 191, 236)'
                    }])
                },

                data: [140, 232, 101, 264, 90, 340, 250]
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<style>
    .card-dth {
        padding: 8px;
    }
    .fix-d {
        display: flex;
        justify-content: space-between;
        width: 86%;
        margin: auto;
    }
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }
    .d-rigth {
        padding-top: 10px;
        text-align: -webkit-center;
    }
    .u-left {
        text-align: center;
        padding-left: 16px;
    }
    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;
        font-family: 'AliM';
    }
    .bg-txt {
        display: flex;
        text-align: center;
    }

    .k {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .h {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }

    .bg-str {
        margin-top: 6px;
        color: #000000;
        font-weight: bold;
        font-size: 16px;
    }

    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        width: 98%;
        margin: auto;
    }

    .rig-img {
        margin: 15px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .mt-top {
        margin-top: 25px;
        margin-bottom: 25px;
        padding-left: 16px;
    }

    .fnt-30 {
        font-size: 25px;
    }

    .mt5 {
        margin-top: 5px;
    }

    .color-total {
        background: #5B78FF !important;
    }

    .color-z {
        background: #E6A500 !important;
    }

    .male {
        margin-top: 15px;
        display: inline-block;
        width: 72px;
    }

    .d-add {
        color: #000000;
        font-size: 18px;
        font-weight: 600;
        margin-top: 2px;
        margin-left: 6px;
    }
    .d-str {
        color: #999999;
    }
    .head-dfix {
        width: 100%;
        margin: auto;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .dd-fix {
        display: flex;
        justify-content: space-between;
    }
    .z {
        background: #5B78FF;
    }
    .kuai {
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    .b {
        background: #48cda6;
    }

    .s {
        background: #8FDFFE;
    }
    .r {
        background: #E6A500;
    }
    .h {
        background: #FF6363;
    }
    .u {
        background: #fd87fb;
    }
</style>
</body>
</html>
